<template>
    <el-container :class="theme" style="height: 100%;">
        <el-aside id="nav-bar">
            <nav-bar></nav-bar>
        </el-aside>
        <el-container style="position: relative;">
            <el-main>
                <div class="router-view" :style="{'left' : left + '%'}">
                    <div class="router-item" style="left: 0;">
                        <project></project>
                    </div>
                    <div class="router-item" style="left: 50%;">
                        <api></api>
                    </div>
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import navBar from '@/layout/nav';

    import project from './project/index';
    import api from './api/index';


    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                left: '',
            }
        },
        computed: {
            ...mapState("theme", {
                theme: state => state.theme
            }),
            ...mapState("router", {
                status: state => state.status
            }),
        },
        watch: {
            status(newValue) {
                switch (newValue) {
                    case 'project':
                        this.left = 0;
                        break;
                    case 'api':
                        this.left = -100;
                        break;
                    default:
                        this.left = 0;
                        break;
                }


            },
        },
        methods: {
            changeTheme(str) {
                this.$store.dispatch('theme/setTheme', str);
            },
        },
        components: {
            navBar,
            project,
            api
        },
    }
</script>

<style scoped>
    .el-header,
    .el-footer {
        color: #333;
    }

    .el-aside {
        color: #333;
        text-align: center;
    }

    .el-main {
        color: #333;
        position: absolute;
        width: 100%;
        padding: 0px;
        top: 0px;
        bottom: 0px;
        overflow: hidden;
    }

    body>.el-container {
        height: 100%;
    }

    .router-view {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 200%;
        height: 100%;
        /* background: #333; */
    }

    .router-item {
        width: 50%;
        position: absolute;
        left: 0px;
        height: 100%;
    }
</style>